
<template>
  <div class="container">
    <div class="app-container">
      <template>
        <div class="container">
          <div class="app-container">
            <!-- 角色管理内容 -->
            <div class="role-operate">
              <el-button size="mini" type="primary" @click="addClick">添加角色</el-button>
            </div>
            <!-- 放置table组件 -->
            <el-table :data="list">
              <!-- 放置列 -->
              <el-table-column prop="name" align="center" width="200" label="角色">
                <template v-slot="{ row }">
                  <!-- 条件判断 -->
                  <el-input v-if="row.isEdit" v-model="row.name" size="mini" />
                  <span v-else>{{ row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="state" align="center" width="200" label="启用">
                <!-- 自定义列结构 -->
                <template v-slot="{ row }">
                  <el-switch v-if="row.isEdit" v-model="row.state" :active-value="1" :inactive-value="0" />
                  <span v-else>  {{ row.state === 1 ? "已启用" : row.state === 0 ? "未启用" : "无" }} </span>
                </template>
              </el-table-column>
              <el-table-column prop="description" align="center" label="描述">
                <template v-slot="{ row }">
                  <el-input v-if="row.isEdit" v-model="row.description" type="textarea" />
                  <span v-else>{{ row.description }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template v-slot="{ row }">
                  <template v-if="row.isEdit">
                    <!-- 编辑状态 -->

                    <el-button type="primary" size="mini" @click="sbumitForm(row)">确定</el-button>
                    <el-button size="mini" @click="quxiao(row)">取消</el-button>
                  </template>
                  <template v-else>
                    <!-- 非编辑状态 -->
                    <el-button size="mini" type="text" @click="onShowParms(row.id)">分配权限</el-button>
                    <el-button size="mini" type="text" @click="btnEditRow(row)">编辑</el-button>
                    <el-popconfirm
                      title="你确定要删除吗？"
                      @onConfirm="confirm(row)"
                    >
                      <el-button slot="reference" size="mini" type="text">删除</el-button>
                    </el-popconfirm>
                  </template>
                </template>
              </el-table-column>
            </el-table>
            <!-- 放置分页组件 -->
            <el-row type="flex" style="height:60px" align="middle" justify="end">
              <!-- 放置分页组件 -->
              <el-pagination
                :page-size="pageParams.pagesize"
                :current-page="pageParams.page"
                :total="pageParams.total"
                layout="prev, pager, next"
                @current-change="changePage"
              />
            </el-row>
          </div>
        </div>
      </template>
    </div>
    <!-- 弹窗 -->
    <el-dialog width="500px" :title="title" :visible.sync="showDialog">
      <!-- 表单内容 -->
      <el-form ref="roleForm" label-width="120px" :model="roleForm" :rules="rules">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="roleForm.name" style="width:300px" size="mini" />
        </el-form-item>
        <el-form-item label="启用">
          <el-switch v-model="roleForm.state" size="mini" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input
            v-model="roleForm.description"
            type="textarea"
            :rows="3"
            style="width:300px"
            size="mini"
          />
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button type="primary" size="mini" @click="addAarl">确定</el-button>
              <el-button size="mini" @click="createAarl">取消</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="分配权限"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <el-tree
        ref="treeRef"
        check-strictly
        :data="treeList"
        :props="props"
        default-expand-all
        show-checkbox
        node-key="id"
        :default-checked-keys="permIds"
      />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onpPrimary">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
// eslint-disable require-atomic-updates
import { getRoleList, addRole, updateRole, delRole, getRoleParticulars, putAssignPrem } from '@/api/role'
import { getPermission } from '@/api/permission'
import { transformData } from '@/utils'
export default {
  name: 'Role',
  data() {
    return {
      // 表单假数据数据
      pageParams: {
        page: 1, // 第几页
        pagesize: 5, // 每页多少条
        total: 1
      },
      props: {
        label: 'name'
      },
      // 弹框表单数据
      roleForm: {
        name: '',
        description: '',
        state: 0 // 默认未1启用 关闭 0 打开1
      },
      // 校验规则
      rules: {
        name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
        description: [{ required: true, message: '角色描述不能为空', trigger: 'blur' }]
      },
      list: [],
      treeList: [], // 分配权限的树形
      permIds: [], // 旧的权限
      showDialog: false,
      title: '新增角色',
      dialogVisible: false // 分配权限

    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    async onShowParms(id) {
      this.id = id
      this.dialogVisible = true
      const { data } = await getPermission()
      // 使用 transformData 转树形
      this.treeList = transformData(data, 0)
      const res = await getRoleParticulars(id)
      this.permIds = res.data.permIds
    },
    async onpPrimary() {
      await putAssignPrem(this.id, this.$refs.treeRef.getCheckedKeys())
      // 提示用户
      this.$message.success('分配成功')
      // 关闭弹窗
      this.dialogVisible = false
      // 刷新数据
      this.getRoleList()
    },
    async getRoleList() {
      const res = await getRoleList({ page: this.pageParams.page, pagesize: this.pageParams.pagesize })
      this.list = res.data.rows.map(v => ({ ...v, isEdit: false, edEdit: { name: v.name, state: v.state, description: v.description }}))
      this.pageParams.total = res.data.total
    },
    changePage(page) {
      this.pageParams.page = page
      this.getRoleList()
    },
    // 添加按钮
    addClick() {
      // 改变 title 标题
      this.title = '新增角色'
      // 开启弹窗
      this.showDialog = true
    },
    compile() {
      // 改变 title 标题
      this.title = '编辑角色'
      // 开启弹窗
      this.showDialog = true
    },
    // 确认按钮
    async addAarl() {
      // 表单验证
      await this.$refs.roleForm.validate()
      // 发送请求
      await addRole(this.roleForm)
      // 提示用户
      this.$message.success('新增成功')
      // 清空表单
      this.$refs.roleForm.resetFields()
      // 关闭弹窗
      this.showDialog = false
      // 刷新数据
      this.getRoleList()
    },
    // 取消按钮
    createAarl() {
      this.showDialog = false
      // 清空表单
      this.$refs.roleForm.resetFields()
    },
    // 编辑按钮
    btnEditRow(row) {
      row.isEdit = true
    },
    // 行内 取消
    quxiao(row) {
      row.isEdit = false
      row.name = row.edEdit.name
      row.state = row.edEdit.state
      row.description = row.edEdit.description
    },
    async sbumitForm(row) {
      // 校验表单
      if (!row.name || !row.description) {
        this.$message.warning('内容不能为空')
        return
      }
      await updateRole({
        name: row.name,
        state: row.state,
        description: row.description,
        id: row.id
      })
      // 弹出提示
      this.$message.success('编辑成功')
      // // 刷新数据
      // this.getRoleList()
      Object.assign(row.edEdit, { name: row.name, state: row.state, description: row.description })
      Object.assign(row, { isEdit: false })
    },
    // 删除数据
    async confirm(row) {
      // 发送请求
      await delRole(row.id)
      // 弹出提示
      this.$message.success('删除成功')

      if (this.list.length === 1 || this.pageParams.page > 1) {
        this.pageParams.page--
      }
      // 刷新数据
      this.getRoleList()
    }

  }
}
</script>
<style scoped>
.role-operate {
  padding: 10px;
}
</style>
